<template>
  <div>
    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action="#"
      drag
      multiple
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :http-request="uploadHttpRequest"
      :on-change="handleUploadChange"
      :limit="3"
      :on-exceed="handleExceed"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        Drop file here or
        <em>click to upload</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload>
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'
import { uplode_file } from '@/api/home'

const fileList = ref<UploadUserFile[]>([])
const formData = reactive(new FormData())
const list = reactive<Home.List.HomeList[]>([{ name: 'xx', age: 123 }])



const handleUploadChange = async (file) => {
  formData.append(file.name, file.raw)
}

const submit = async () => {
  formData.append('folder_id', '1')
  const result = await uplode_file(formData)
  formData.delete('folder_id', '1')
}

const uploadHttpRequest = (data) => {
  let reader = new FileReader()
  reader.readAsText(data.file)
  reader.onload = function () {}
}

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
  // console.log(file, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
  // console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`,
  )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(
    `Cancel the transfer of ${uploadFile.name} ?`,
  ).then(
    () => true,
    () => false,
  )
}
</script>
